/*
 * @Author: jackning 270580156@qq.com
 * @Date: 2024-01-18 23:32:56
 * @LastEditors: jackning 270580156@qq.com
 * @LastEditTime: 2025-01-04 14:29:51
 * @Description: bytedesk.com https://github.com/Bytedesk/bytedesk
 *   Please be aware of the BSL license restrictions before installing Bytedesk IM –
 *  selling, reselling, or hosting Bytedesk IM as a service is a breach of the terms and automatically terminates your rights under the license.
 *  仅支持企业内部员工自用，严禁私自用于销售、二次销售或者部署SaaS方式销售
 *  Business Source License 1.1: https://github.com/Bytedesk/bytedesk/blob/main/LICENSE
 *  contact: 270580156@qq.com
 * 联系：270580156@qq.com
 * Copyright (c) 2024 by bytedesk.com, All Rights Reserved.
 */
import { AppContext } from "@/context/AppContext";
import useStyle from "@/hooks/useStyle";
import { Layout, Menu, MenuProps } from "antd";
import React, { useContext, useState } from "react";
import { useIntl } from "react-intl";
import { Outlet, useNavigate } from "react-router-dom";

const { Header, Sider, Content } = Layout;

// https://ant-design.antgroup.com/components/layout-cn
const Setting: React.FC = () => {
  const intl = useIntl();
  const navigate = useNavigate();
  const { isLoggedIn } = useContext(AppContext);

  const initMenuItems: MenuProps["items"] = [
    {
      label: "设置",
      key: "setting",
      children: isLoggedIn
        ? [
            {
              label: "个人信息",
              key: "profile",
            },
            {
              label: "基本设置",
              key: "basic",
            },
          ]
        : [
            {
              label: "基本设置",
              key: "basic",
            },
          ],
    },
  ];

  const [leftMenuItems] =
    useState<MenuProps["items"]>(initMenuItems);
  const { headerStyle, leftSiderStyle, leftSiderWidth, contentStyle } =
    useStyle();


  const onMenuClick: MenuProps["onClick"] = (e) => {
    console.log("menu click ", e);
    navigate("/setting/" + e.key);
  };

  return (
    <Layout>
      <Sider style={leftSiderStyle} width={leftSiderWidth}>
        <Menu
          mode="inline"
          onClick={onMenuClick}
          defaultSelectedKeys={["basic"]}
          defaultOpenKeys={["setting"]}
          items={leftMenuItems}
        />
      </Sider>
      <Layout>
        <Header style={headerStyle}>
          {intl.formatMessage({ id: "menu.dashboard.mine" })}
        </Header>
        <Content style={contentStyle}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default Setting;
